<template>
	<div class="loginBox">
		<div class="loginBoxInner clearfix">
			<div class="left leftBox">
				<img src="@/assets/login/login_changeCard1.png" style="width:800px;padding-top:30px;" alt />
			</div>
			<div class="left rightBox">
				<div></div>
				<div class="container">
					<div class="comNameWrap clear"><p>登录</p></div>
					<el-form ref="loginForm" class="loginForm">
						<div style="position: relative;">
							<img src="@/assets/login/username.png" style="position: absolute;top: 25px;left: 30px;width: 27px;height: 28px;z-index: 10;" alt />
							<el-form-item prop="username">
								<el-input size="small" ref="username" v-model.trim="loginForm.username" placeholder="请输入您的用户名"></el-input>
							</el-form-item>
						</div>

						<div style="position: relative;">
							<img src="@/assets/login/password.png" style="position: absolute;top: 25px;left: 30px;width: 27px;height: 28px;z-index: 10;" alt />
							<el-form-item prop="password">
								<el-input type="password" size="small" v-model.trim="loginForm.password" placeholder="请输入您的密码"></el-input>
							</el-form-item>
						</div>
						<el-button class="submitBtn" type="primary" @click="login">登 录</el-button>
					</el-form>
				</div>

			</div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			sessionId: '',
			loginForm: {
				username: '',
				password: '',
				verifyInput: ''
			},
			yzmImg: ''
		};
	},
	methods:{
		login(){
			localStorage.setItem('loginToken','sdsdfsdf');
			this.$router.push({ path: "/home" });
		}
	}
};
</script>

<style lang="scss" scoped>
.yzmImg {
	cursor: pointer;
	display: inline-block;
	height: 30px;
	vertical-align: middle;
}
.loginBox {
	position: relative;
	min-width: 1200px;
	height: 100%;
	background: url('../../assets/login/bg.png') no-repeat 0 0;
	background-size: cover;
	display: flex;
	justify-content: center;
	align-items: center;

	.loginBoxInner {
		overflow: hidden;
		.rightBox {
			height: 100%;
			padding: 45px;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			border: 2px #0b86f1 solid !important;
			border-radius: 20px;
			margin-left:40px;
			.container {
				width: 500px;
				z-index: 10;
				
				.comNameWrap {
					margin-bottom: 60px;
					p {
						font-size: 52px;
						padding: 0 4px 0px 4px;
						color: #5b92f0;
						text-align: left;
					}
				}
				.loginForm {
					width: 100%;
					margin: 0 auto;
					.el-form-item {
						margin-bottom: 20px;
					}
					.yzmInput {
						display: inline-block;
						width: 150px;
						text-indent: 14px;
						font-size: 14px;
					}
					.submitBtn {
						width: 100%;
						background: #67a9f6 !important;
						border-color: #67a9f6 !important;
						color: #fff !important;
						height:72px;
						border-radius: 36px !important;
						font-size: 36px;
						margin-top:60px;
					}
				}
			}
		}
	}
}
</style>
